<template>
  <!-- 商品信息 -->
  <div class="container">
    <div class="body_box">
      <div class="img_box">
        <img :src="goodsDetail.pic_url" :alt="goodsDetail.pic_url" />
      </div>
      <p class="price">￥{{ (goodsDetail.price / 100).toFixed(2) }}</p>
      <div class="goods_name">{{ goodsDetail.name }}</div>
      <p class="brands">品牌商：{{ goodsDetail.brand }}</p>
      <div class="express_prompt">
        <span>
          库存：<span>{{ goodsDetail.stock }}</span>
        </span>
        <span>免邮费 顺丰快递</span>
      </div>
      <div class="detail">
        <p class="title">商品详情</p>
        <!-- v-html  解析我们的html代码 -->
        <p class="content" v-html="goodsDetail.detail_info"></p>
      </div>
    </div>
  </div>
  <!-- 底部 动作栏 -->
  <van-action-bar>
    <van-action-bar-icon
      :badge="store.count"
      @click="router.push('/cart')"
      icon="cart-o"
      text="购物车"
    />
    <van-action-bar-icon
      @click="collect"
      :icon="goodsDetail.collect > 0 ? 'star' : 'star-o'"
      :text="goodsDetail.collect > 0 ? '已收藏' : '未收藏'"
      color="#ff5000"
    />
    <van-action-bar-button @click="addCart" type="warning" text="加入购物车" />
    <!-- 跳转至 地址选择  传递当前商品id -->
    <van-action-bar-button @click="router.push(`/address-list?goodsId=${route.params.id}`)" type="danger" text="立即购买" />
  </van-action-bar>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { getGoodsDetail } from "@/api/goods";
import { collecdAdd, collecdDelete } from "@/api/collect";
import { cartAdd,cartEdit } from "@/api/cart";
import { useRoute, useRouter } from "vue-router";
import { showSuccessToast } from "vant";
import useCartInfo from "@/stores/useCartInfo";

// 购物车仓库实例
let store = useCartInfo();

// 获取router实例
let route = useRoute();
let router = useRouter();

console.log(route.params.id);

// 商品基本信息
let goodsDetail = ref({});

// goodsDetail.collect===0

// 挂载完成 自动调接口 获取商品详情
onMounted(async () => {
  goodsDetail.value = (await getGoodsDetail({ id: route.params.id })).data;
});

// 点击收藏按钮收藏
let collect = async () => {
  if (goodsDetail.value.collect > 0) {
    // 已经收藏  执行取消收藏逻辑
    await collecdDelete({ type: "1", object_id: route.params.id });
    showSuccessToast("取消收藏成功");
    goodsDetail.value.collect = 0;
  } else {
    // 未收藏  执行 收藏逻辑
    await collecdAdd({ type: "1", object_id: route.params.id });
    showSuccessToast("收藏成功");
    goodsDetail.value.collect = 1;
  }
};

// 点击 加入购物车按钮
let addCart = async () => {
  // 判断当前商品是否在购物车内存在
  // find方法 在购物车列表内 查询 是否有当前商品  有则返回
  let data = store.list.find((item) => item.goods_id == route.params.id);
  if (data) {
    // 如果存在  需要调用编辑接口
    await cartEdit({id:data.id,goods_id:route.params.id,count:data.count+1})
    showSuccessToast("添加至购物车成功");
    store.getCartInfo()
  } else {
    // 如果不存在直接调用添加接口
    await cartAdd({goods_id:route.params.id,count:1})
    showSuccessToast("添加至购物车成功");
    // 触发 购物车仓库action  重新获取最新的购物车数据
    store.getCartInfo()
  }
};
</script>

<style lang="scss" scoped>
// 内边距离
$pad: 8px;

.body_box {
  background-color: white;
  margin: 0 10px;
  .img_box {
    width: 100%;
    text-align: center;
    img {
      width: 100%;
    }
  }
  .goods_name {
    padding: 0 $pad;
    background-color: white;
    font-size: 18px;
  }
  .brands,
  .express_prompt {
    padding: 0 $pad;
    display: flex;
    justify-content: space-between;
    color: #999999;
    font-size: 14px;
    margin: 6px 0;
  }
  .price {
    padding: 0 $pad;
    color: #f63515;
    font-size: 22px;
    margin: 6px 0;
  }
  .detail {
    .title {
      margin: 10px 0;
      font-weight: bold;
      font-size: 14px;
      color: black;
      text-align: center;
    }
    .content {
      padding: 0 12px;
      font-size: 16px;
      color: rgb(84, 84, 84);
      text-indent: 2em;
    }
  }
}
</style>
